<template>
        <v-navigation-drawer width="300" v-model="setting" overlay-opacity="0" floating temporary right app>
            <v-sheet class="ma-4" color="transparent">
                <v-flex class="mb-3 subtitle-1">主题颜色</v-flex>
                <v-color-picker width="268" canvas-height="100" class="mb-3" v-model="primarySet" hide-inputs flat dark></v-color-picker>
                <v-flex class="mb-3 subtitle-1">关键颜色</v-flex>
                <v-color-picker width="268" canvas-height="100" class="mb-3" v-model="secondarySet" hide-inputs flat dark></v-color-picker>
                
            </v-sheet>
        </v-navigation-drawer>
</template>

<script>

export default {
  name: "Home",
  props: {
    setting: {
      type: Boolean,
      default: false

    }
  },
  data() {
    return {
      // setting: false,
      backgroundNav: true,
      appbarShadow: 4,
      // background: {
      //   backgroundImage: `url(${require("../assets/background.png")})`,
      //   backgroundAttachment: "fixed"
      // },
      fullscreenIcon: "mdi-fullscreen",
      tabMenu: false,
      x: 0,
      y: 0,
    };
  },
  mounted() {
    this.backgroundNav = JSON.parse(
      localStorage.getItem("backgroundNav") || true
    );
    this.appbarShadow = localStorage.getItem("appbarShadow") || 4;
  },
  computed: {
    primarySet: {
      get: function() {
        return this.$vuetify.theme.dark
          ? this.$vuetify.theme.themes.dark.primary
          : this.$vuetify.theme.themes.light.primary;
      },
      set: function(newValue) {
        if (this.$vuetify.theme.dark) {
          this.$vuetify.theme.themes.dark.primary = newValue;
        } else {
          this.$vuetify.theme.themes.light.primary = newValue;
        }
      }
    },
    secondarySet: {
      get: function() {
        return this.$vuetify.theme.dark
          ? this.$vuetify.theme.themes.dark.secondary
          : this.$vuetify.theme.themes.light.secondary;
      },
      set: function(newValue) {
        if (this.$vuetify.theme.dark) {
          this.$vuetify.theme.themes.dark.secondary = newValue;
        } else {
          this.$vuetify.theme.themes.light.secondary = newValue;
        }
      }
    }
  },
  methods: {
  },
  watch: {
    backgroundNav(val) {
      localStorage.setItem("backgroundNav", val);
    }
  }
};
</script>